<template>
     <video class="videoItem" @click="goVideo" src="https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4" id="myVideo" :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" objectFit="cover"></video>
     <view class="triangle" v-if="showPause" @click="stopVideo"></view>
</template>

<script setup>
import { onMounted, ref } from "vue";
let videoContext=ref(null)
let showPause=ref(false)
	onMounted(()=>{
		videoContext.value=uni.createVideoContext('myVideo')
		showPause.value=true
		console.log(videoContext.value)
	})
	const goVideo=()=>{
		videoContext.value.play()
	}
	const stopVideo=()=>{
		videoContext.value.pause()
	}
</script>

<style scoped lang="scss">
	.videoItem{
		width: 100%;
		height: 100vh;
	}
.triangle{
	width: 0px;
	height: 0px;
  border-left: 50px solid white;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
	position: fixed;
	bottom: 300px;
	left: 50%;
}
</style>